<script setup lang="js">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

let router = new useRouter();
let name = ref('');
name = sessionStorage.getItem("username");

function logout() { // 注销功能，删除基本信息，退回到注册界面
  sessionStorage.removeItem("token");
  sessionStorage.removeItem("menuList");
  sessionStorage.removeItem("username");
  router.push({ path: "/login" });
}
</script>

<template>
  <el-header>
    <div>
      <img
        src="@/assets/img/welcome.png"
        style="width: 300px; height: 75px; margin: 40px 0 0 55px;"
      />
    </div>
    <el-dropdown split-button type="default" style="position: fixed; top: 10px; right: 10px; z-index: 9999;">
      {{ name }}
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="logout">注销</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </el-header>
</template>

<style lang="css" scoped>
.el-header {
  width: 100%;
  max-height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-header > h2 {
  color: #0b67b8;
}

</style>
